<template>
  <div>
    <!-- 查找 -->
    <el-space>
      <el-input v-model="seekData.title" placeholder="请输入商品名称" />
      <el-input v-model="seekData.barcode" placeholder="请输入商品条形码" />
      <el-select v-model="seekData.status" class="m-2" placeholder="请选择商品状态">
        <el-option label="未售" :value="0" />
        <el-option label="在售" :value="1" />
      </el-select>
      <el-cascader
        :options="options"
        :props="props"
        v-model="seekData.categoryId"
        placeholder="请选择类目"
      />
      <el-button type="primary" :icon="Search" @click="seekDatas">查找</el-button>
      <el-button
        type="primary"
        :icon="Plus"
        v-permission="'product:product:create'"
        @click="$router.push({name:'addProductMessage'})"
      >添加</el-button>
    </el-space>
    <!-- 表格数据 -->
    <el-table
      :data="commodityData"
      border
      style="width: 100%"
      v-loading="loading"
      element-loading-text="加载中..."
    >
      <el-table-column align="center" type="selection" />
      <el-table-column label="sku信息" align="center" width="100" type="expand">
        <template #default="props">
          <el-table :data="props.row.skuList" border style="width: 98%;margin:auto">
            <el-table-column label="商品条码" prop="barCode" align="center" />
            <el-table-column label="商品规格" prop="title" align="center" />
            <el-table-column label="商品库存" prop="stock" align="center" />
            <el-table-column label="原价" prop="originalPrice" align="center" />
            <el-table-column label="现价" prop="price" align="center" />
            <el-table-column label="VIP价格" prop="vipPrice" align="center" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="商品ID" align="center" />
      <el-table-column prop="title" label="名称" align="center" width="200" />
      <el-table-column prop="img" label="图片" align="center">
        <template #default="scope">
          <el-image :src="scope.row.img" />
        </template>
      </el-table-column>
      <el-table-column label="商品详细介绍" align="center">
        <template #default="scope">
          <el-button type="primary" @click="lookOver(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="categoryId" label="类目ID" align="center" />
      <el-table-column prop="freightTemplateId" label="邮费模板ID" align="center" />
      <el-table-column prop="sales" label="销量" align="center" />
      <el-table-column prop="unit" label="单位" align="center" />
      <el-table-column prop="status" label="是否在售" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status?'success':'info'">{{scope.row.status?'在售':'未售'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" align="center" />
      <el-table-column prop="date" label="操作" align="center" width="200">
        <template #default="scope">
          <el-button type="primary" @click="compileGoods(scope.row)">编辑</el-button>
          <el-button
            @click="clickStatus(scope.row.status ? 0 : 1, scope.row.id)"
            :type="scope.row.status ? 'warning' : 'success'"
          >{{ scope.row.status ? "下架" : "上架" }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pa-ging v-bind="pages" @changePage="changePage" @changeLimit="changeLimit" />
    <!-- 图片对话框 -->
    <el-dialog v-model="dialogVisible" title="商品详情" width="790px" :before-close="handleClose">
      <div v-html="detail"></div>
    </el-dialog>
  </div>
</template>

<script>
import { Search, Plus } from "@element-plus/icons-vue";
import { post, get } from "@/utlis/http";
import store from '@/store';
export default {
  setup() {
    return {
      Search,
      Plus,
    };
  },
  data() {
    return {
      pages: {
        page: 1, //页
        limit: 10, //条
        total: 10, //总条数
      },
      seekData: {
        title: "", //商品标题
        barcode: "", //条形码
        status: "", //状态
        categoryId: "", //类目
      },
      commodityData: [], //商品数据
      dialogVisible: false, //对话框
      detail: [], //查看图片
      loading: true,
      options: [], //类目
      props: {
        value: "id", //指定选项的值为选项对象的某个属性值
        label: "title", //指定选项标签为选项对象的某个属性值
        children: "childrenList", //指定选项的子选项为选项对象的某个属性值
        emitPath: false, //在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
      },
    };
  },
  created() {
    this.initiaLize();
    this.categoryTree();
  },
  methods: {
    //初始化
    initiaLize() {
      let data = {
        _gp: "admin.product",
        _mt: "list",
        ...this.seekData,
        page: this.pages.page,
        limit: this.pages.limit,
      };
      get(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.commodityData = data.items;
          this.pages.total = data.total;
          this.loading = false;
        }
      });
    },
    //所属类目
    categoryTree() {
      let data = {
        _gp: "admin.category",
        _mt: "categoryTree",
      };
      post(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.options = data;
        }
      });
    },
    //下架商品
    clickStatus(status, spuId) {
      let data = {
        _gp: "admin.product",
        _mt: "freezeOrActivation",
        spuId,
        status,
      };
      post(data).then((res) => {
        let { errno, errmsg } = res.data;
        if (200 == errno) {
          ElMessage.success(status ? "上架成功" : "下架成功");
          this.initiaLize();
        } else {
          ElMessage.warning(errmsg);
        }
      });
    },
    //查看
    lookOver(row) {
      setTimeout(() => {
        this.dialogVisible = true;
      }, 250);
      let data = {
        _gp: "admin.product",
        _mt: "detail",
        spuId: row.id,
      };
      post(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.detail = data.detail;
        }
      });
    },
    //查找
    seekDatas() {
      this.initiaLize();
      this.loading = true;
    },
    //编辑
    compileGoods(row) {
      this.$router.push({
        name: "compileProductMessage",
        query: { id: row.id },
      });
      store.dispatch('getId',row.id)
    },
    //条
    changeLimit(val) {
      this.pages.limit = val;
      this.initiaLize();
    },
    //页
    changePage(val) {
      this.pages.page = val;
      this.initiaLize();
    },
    //关闭对话框
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin: 20px 0px 40px 0px;
  .el-image {
    width: 50px;
  }
}
</style>